<template>
<div>

  <div>
    <el-button type="primary" @click.prevent="dialogFormVisible = true" icon="el-icon-mouse"></el-button>
  </div>

  <div>
    <template>
      <el-table
          :data="booktypeList"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="类别"
            width="180">
        </el-table-column>
        <el-table-column
            prop="createtime"
            label="创建时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="updatetime"
            label="更新时间"
            width="180">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="warning" @click.prevent="jumpBooktype(scope.row.id)" icon="el-icon-scissors" circle></el-button>
            <el-button type="danger" @click.prevent="deleteBooktype(scope.row.id)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>

  <div>
      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="booktypeForm" ref="addForm" :rules="addForm">
          <el-form-item label="书类名" prop="name">
            <el-input v-model="booktypeForm.name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button  @click.prevent="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAddForm">确 定</el-button>
        </div>
      </el-dialog>
  </div>

  <div>
    <el-dialog title="修改" :visible.sync="dialogUpdateFormVisible">
      <el-form :model="bookUpdateForm" ref="updateForm" :rules="updateForm">
        <el-form-item label="书类名" prop="name">
          <el-input v-model="bookUpdateForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click.prevent="dialogUpdateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateBookType">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</div>
</template>

<script>
export default {
  name: "BookType",
  data(){
    return{
      booktypeList : [],
      booktypeForm : {},
      bookUpdateForm : {},
      dialogFormVisible : false,
      dialogUpdateFormVisible : false,
      addForm : {
        name : [
          {required: true, message: "不能为空", trigger: "blur"}
        ]
      },
      updateForm : {
        name : [
          {required: true, message: "不能为空", trigger: "blur"}
        ]
      },
    }
  },
  methods:{
    initBookType(){
      this.$axios.post("/booktype/queryall").then( res =>{
        this.booktypeList = res.data.data;
      })
    },
    submitAddForm(){
      this.$refs.addForm.validate(valid =>{
        if(!valid){
          this.$message({
            message:"请正确填写表单" ,
            type:'error',
            duration:2000
          })
          return;
        }

        this.$axios.postForm("booktype/add",this.booktypeForm).then( res =>{
          this.$message({
            message:"添加成功" ,
            type:'success',
            duration:2000
          })
          this.dialogFormVisible = false;
          this.initBookType();
        })

      })
    },

    jumpBooktype(id) {
      this.$axios.post("booktype/queryById/" + id).then(res => {
        this.bookUpdateForm = res.data.data
        this.dialogUpdateFormVisible = true
      })
    },

    updateBookType(){
      this.$refs.updateForm.validate(valid =>{
        if(!valid){
          this.$message({
            message:"请正确填写表单" ,
            type:'error',
            duration:2000
          })
          return;
        }

        console.log(this.bookUpdateForm)

        this.$axios.post("booktype/update",this.bookUpdateForm).then( res =>{
          this.$message({
            message:"修改成功" ,
            type:'success',
            duration:2000
          })
          this.dialogUpdateFormVisible = false;
          this.initBookType();
        })
      })
    },

    deleteBooktype(id){
      this.$confirm('此操作将永久删除,是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( ()=>{
        this.$axios.delete("booktype/delete/"+id)
            .then(response => {
              let responseData = response.data;

              if (responseData.code == 200){
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                  duration:2000
                });
                //刷新当前页
                this.initBookType();

              }else {
                this.$message({
                  type: 'error',
                  message: responseData.msg ,
                  duration:2000
                });
              }
            })
      }).catch( ()=>{
        //取消
        this.$message({
          type: 'success',
          message: '已取消删除'
        });
      })
    },

  },
  created() {
    this.initBookType();
  }
}
</script>

<style scoped>

</style>